<template>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div class="register">
        <van-form @submit="onSubmit" label-align="left">
            <van-cell-group inset>
                <van-field v-model="form.user_acc" name="账号" label="账号" placeholder="用户名/邮箱" />
                <van-field v-model="form.user_nick_name" name="昵称" label="昵称" placeholder="昵称" />
                <van-field v-model="form.user_pwd" type="password" name="密码" label="密码" placeholder="密码" />
                <van-field v-model="form.user_pwd2" type="password" name="确认密码" label="确认密码" placeholder="密码" />

                <van-field v-model="form.code" center clearable label="邮箱验证码" placeholder="请输入验证码">
                    <template #button>
                        <van-button size="small" type="primary" @click="sendEmailFn">{{ message }}</van-button>
                    </template>
                </van-field>
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block color="#FF2A43" native-type="submit">
                    注册账号
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import { sendEmailFunc ,  registerFunc} from '../api/index'
import { Toast, showToast } from 'vant'
// import moment from 'moment';
let message = ref('发送验证码');
let time = 120;
let dingshiqi: any = null;
const downTime = () => {
    time --;
    if(time <= 0) {
        clearInterval(dingshiqi)
        message.value = `重新发送验证码`
        return ;
    }
    message.value = `剩余${time}秒`
}
const $router = useRouter();
const onClickLeft = () => {
    // console.log('返回')
    $router.back();
}

// 定义变量 记表单信息
let form = reactive({
    user_acc: '',
    user_pwd: '',
    user_pwd2: '',
    code: '',
    user_nick_name: ''
})

// 发送邮箱验证码
const sendEmailFn = async () => {
    if(form.user_acc == "") {
        showToast('请请输入邮箱。')
        return ;
    }
    message.value = `正在发送...`
    await  sendEmailFunc({ email: form.user_acc })
    .then(
        (content: any)=>{
            if(content.code == 200){
                // 反馈
                downTime();
                dingshiqi = setInterval(downTime,1000)
            }
            // 提示
            showToast(content.msg);
        }
        ,
        err=>{
            showToast(err.msg);
        }
    )
}

// user_acc（账号   user_pwd（密码） user_nick_name(昵称) code(邮箱验证码)
// 提交表单信息的方法
const onSubmit = async () => {
    // console.log(form);
    let  {user_acc ,user_pwd , user_nick_name ,  code , user_pwd2} = form;
    if(user_pwd2 != user_pwd){
        showToast('两次输入的密码不一致。')
        return ;
    }
    // 执行注册的接口
    await registerFunc({user_acc ,user_pwd , user_nick_name ,  code })
    .then(
        (content: any)=>{
            console.log('1.0', content)
            // 提示
            showToast(content.msg)
            // 注册成功跳转
            if(content.code==200){
                $router.push({
                    path:'/sigin',
                    query: {
                        email: user_acc
                    }
                })
            }
        },
        err=>{
            showToast(err.msg)
        }
    )
};
</script>

<style lang="less">
@import '@/static/less/common.less';

:root {
    --van-nav-bar-icon-color: #000;
    /* --aaa: red; */
}

.register {
    margin-top: 2.6667rem;
}
</style>